<template>
	<div class="index">
		<Header></Header>
		<!-- 内容 -->
		<div class="w65 ma">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
		</div>
		<div class="conent-top">
			<el-row :gutter="20">
				<el-col :span="5">
					<div class="pb1">
						<img class="vatb plr07" src="../../assets/index/catalogue.png" alt="" />
						<span class="c2b fwb fz105 ls03">资源目录</span>
					</div>
					<el-menu :default-active="activeMenu" ref="menuRef" router class="el-menu-vertical-demo">
						<el-menu-item index="/oceanFile">地学产品</el-menu-item>
						<el-menu-item index="/oceanSubjectClassifyDrill">标准规范</el-menu-item>
						<el-menu-item index="/oceanMapsFile">图件</el-menu-item>
						<el-menu-item index="/oceanMonitoring">监测点</el-menu-item>
						<el-menu-item index="/oceanDataFile">资料档案</el-menu-item>
					</el-menu>
				</el-col>
				<el-col :span="19"><router-view /></el-col>
			</el-row>
		</div>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
export default {
	name: 'ocean',
	components: {
		breadcrumb
	},
	computed: {
		activeMenu() {
			const route = this.$route;
			const { meta, path } = route;
			if (meta.activeMenu) {
				return meta.activeMenu;
			}
			return path;
		}
	},
	data() {
		return {};
	},
	created() {},
	methods: {}
};
</script>

<style scoped lang="scss">
.conent-top {
	width: 65%;
	height: 70rem;
	margin: auto;
	.el-menu-vertical-demo {
		height: 65rem;
		overflow-y: auto;
		border-radius: 8px;
	}
}
/deep/.el-submenu__title {
	background-color: #d9ecfe !important;
}
.el-menu-item:hover {
	background-color: #92c0f1;
	color: #ffffff;
}
.el-menu {
	border: solid 1px #e6e6e6;
}
.el-menu-item {
	background-color: #f9f9f9;
	border-bottom: 2px #ffffff solid;
}
</style>
